<template>
  <div>
    <div v-show="!isShowEdit">
      <div class="table-page-search-wrapper">
        <el-card>
          <el-form inline :model="queryParams" @submit.native.prevent>
            <el-row :gutter="48">
              <!-- 搜索item项 -->
              <el-col :md="12" :sm="24">
                <el-form-item label="工区" prop="roleName">
                  <el-cascader
                    ref="refCascader"
                    :props="cascaderProps"
                    placeholder="请选择工区"
                    style="width: 100%"
                    :clearable="false"
                    @change="cascaderChange"
                    v-model="cascaderValue"
                  />
                </el-form-item>
              </el-col>
              <!-- 查询按钮 -->
              <el-col :md="12" :sm="24">
                <el-form-item>
                  <span class="table-page-search-submitButtons">
                    <el-button type="primary" @click="handleSearch">查 询</el-button>
                    <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div class="table-block">
        <el-card>
          <div slot="header" class="clearfix">
            <!-- 左侧修改新增按钮组 -->
            <div class="left">
              审批进展
            </div>
            <!-- 右侧按钮组 -->
            <div class="right">
              <div class="table-operator card-right"></div>
            </div>
          </div>
          <!-- 表格数据列表 -->
          <el-table :data="tableList" stripe :height="tableMaxHeigth" :key="Math.random()" row-key="id">
            <el-table-column prop="lineName" label="项目" align="center" show-overflow-tooltip />
            <el-table-column prop="lotName" label="分部" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="workArea" label="工区" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="projectName" label="审批名称" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status" label="审批状态" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="!row.status"><i style="margin-right: 10px; font-size: 18px; color: #E6A23C;">●</i>未发起</span>
                <span v-if="row.status === 10"><i style="margin-right: 10px; font-size: 18px; color: #909399;">●</i>草稿</span>
                <span v-if="row.status === 20"><i style="margin-right: 10px; font-size: 18px; color: #409EFF;">●</i>审批中</span>
                <span v-if="row.status === 25 || row.status === 26"><i style="margin-right: 10px; font-size: 18px; color: #F56C6C;">●</i>驳回</span>
                <span v-if="row.status === 30"><i style="margin-right: 10px; font-size: 18px; color: #67C23A;">●</i>审批完成</span>
              </template>
            </el-table-column>
            <el-table-column prop="finishUserName" label="审批人" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.status === 30 ? scope.row.finishUserName : '/' }}
              </template>
            </el-table-column>
            <el-table-column prop="finishTime" label="审批时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.status === 30"> {{ scope.row.finishTime | formatDateDay }}</span>
                <span v-else>/</span>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="审批时长(h)" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.status === 30 ? scope.row.duration : '/' }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="120"
            >
              <template #default="{ row }">
                <el-button
                  type="text"
                  v-if="(row.status === 26 || row.status === 20) && row.approverList.includes(userId + '')"
                  icon="el-icon-thumb"
                  title="审批"
                  @click="approveHandle(row)"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-view"
                  class="table-button-size"
                  title="详情"
                  @click="handleDetail(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getTableList"
          />
        </el-card>

      </div>
    </div>
  </div>
</template>

<script>
import actions from '@/cros/actions'
import { getTreeByRole, getList } from '@/api/constructionSchemeApprovalProgress'
import { formatDateDay } from '@/utils/filters'

export default {
  name: 'TablePage',
  data () {
    return {
      isShowEdit: false,
      tableList: [],
      // 查询参数
      queryParams: {
        orgId: '',
        pageNo: 1,
        pageSize: 10
      },
      addEditStr: '新增',
      rowData: {},
      menuButtonPermissions: [],
      tableMaxHeigth: 0,
      cascaderValue: [],
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'subRes',
        leaf: 'leaf',
        expandTrigger: 'hover',
        lazy: true,
        lazyLoad: async (node, resolve) => {
          return this.getCascaderData(node, resolve)
        }
      },
      total: 0,
      userId: JSON.parse(window.sessionStorage.getItem('userInfo')).userId,
      projectTypeList: [],
      projectStatusList: []
    }
  },
  mounted () {
    actions.onGlobalStateChange((state, prevState) => {
      console.log(state, 'statestatestate')
      this.menuButtonPermissions = state.menuButtonPermissions.map((v) => v.buttonKey)
    }, true)
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
    formatDateDay,
    translateStatus (status) {
      const stateObj = {
        10: '保存草稿',
        20: '审批中',
        25: '审批驳回',
        30: '审批完成'
      }
      return stateObj[status]
    },
    handleDetail (row) {
      this.$emit('changeShowType', 2, JSON.parse(JSON.stringify(row)))
    },
    approveHandle (row) {
      this.$emit('changeShowType', 3, JSON.parse(JSON.stringify(row)))
    },
    async getCascaderData (node, resolve) {
      const { level } = node
      const res = await getTreeByRole({ parent: node.value || '', orgForm: '97' })
      res.data.forEach((v) => {
        v.leaf = v.childNum <= 0
      })
      if (level === 0) {
        this.getTableList()
      }
      return resolve(res.data)
    },
    cascaderChange () {
      this.queryParams.orgId = this.cascaderValue[this.cascaderValue.length - 1]
      this.getTableList()
    },
    beforeDestroy () {
      // 组件销毁前移除事件监听
      window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 305
      })
    },
    deleteHandle (row) {
      this.$emit('changeShowType', 2, row)
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    // 重置
    resetQuery () {
      this.cascaderValue = []
      this.queryParams.orgId = ''
      this.queryParams.pageNo = 1
      this.getTableList()
    }
  }
}
</script>
<style scoped lang="scss">
.dataCount {
  cursor: pointer;
}
.blurCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #406DA4;
}
.yellowCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ECA600;
}

.redCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.blackCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.left {
  font-weight: 600;
}
</style>
